<template>
  <div>
    <div id="ex-010-0" class="anchor80-line" style="left: 0; top: 0;padding: 15px" draggable="true"
         v-on:dragstart="drag($event)">
      <div class="box" style="left:0px;top:20px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <div class="box" style="left:35px;top:0px"  v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <label id="dragHandler1">1111</label>
      <div class="box" style="right:0px;top:20px"  v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <div class="box" style="left:35px;bottom:0px"  v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
    </div>
    <div id="ex-010-1" class="anchor80-line" style="right: 0; top: 0px;padding: 15px" draggable="true"
         v-on:dragstart="drag($event)">
      <div class="box" style="left:0px;top:20px"  v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <div class="box" style="left:35px;top:0px"  v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <label id="dragHandler2">2222</label>
      <div class="box" style="right:0px;top:20px"  v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)" ></div>
      <div class="box" style="left:35px;bottom:0px"  v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
    </div>
    <div id="ex-010-2" class="anchor80-line" style="left: 0; top: 0;padding: 15px" draggable="true"
         v-on:dragstart="drag($event)">
      <div class="box" style="left:0px;top:20px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <div class="box" style="left:35px;top:0px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)" ></div>
      <label id="dragHandler3">3333</label>
      <div class="box" style="right:0px;top:20px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <div class="box" style="left:35px;bottom:0px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
    </div>
    <div id="ex-010-3" class="anchor80-line" style="right: 0; top: 0px;padding: 15px" draggable="true"
         v-on:dragstart="drag($event)">
      <div class="box" style="left:0px;top:20px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <div class="box" style="left:35px;top:0px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <label id="dragHandler4">4444</label>
      <div class="box" style="right:0px;top:20px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
      <div class="box" style="left:35px;bottom:0px" v-on:mousedown="mouseDownEvent($event)" v-on:mouseout="mouseOutEvent($event)" v-on:mouseover="mouseOverOrMoveEvent($event)" v-on:mousemove="mouseOverOrMoveEvent($event)"></div>
    </div>

    <div style="background: gray;height: 300px;width: 1000px;" v-on:drop="drop($event)"
         v-on:dragover="allowDrop($event)" id="div1">
    </div>
    <button v-on:click="showRelationship()">BUTTON</button>
  </div>
</template>

<script>
  import PlainDraggable from 'plain-draggable';
  let LeaderLine = window.LeaderLine;
  var lines = [{start:'a', end:'b'},{start:'a', end:'e'},{start:'b', end:'c'},{start:'b', end:'d'},{start:'b', end:'h'},{start:'c', end:'f'},{start:'c', end:'g'}]
  var newLine;
  var myDrawsLines = [];
  var ids = [];
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      allowDrop: function (ev) {
        ev.preventDefault();
      },
      drag: function (ev) {
        console.log(ev);
        ev.dataTransfer.setData("Text", ev.target.id);
      },
      drop: function (ev) {
        console.log('drop');
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        var draggable = document.getElementById(data);
        var plainDraggable = new PlainDraggable(draggable, {
          onMove: function () {
            myDrawsLines.forEach(function(item) {
              item.position();
            })
          },
          zIndex: false
        });
        plainDraggable.handle = draggable.children[2];
//        var result = this.buildRelationShip('a');
//        console.log('result', JSON.stringify(result));
      },
      buildRelationShip:function (node) {
        var me = this;
        var result = {};
        result.dependencies = [];
        result.id = node;
        var list = [];
        lines.forEach(function (item) {
          if(item.start == node) {
            list.push(item.end);
          }
        });
        list.forEach(function (item) {
          result.dependencies.push(me.buildRelationShip(item));
        });
        return result;
      },
      mouseDownEvent:function (event) {
        var parentId = event.target.parentElement.id;
        if(ids.length==1&&ids.filter(function(id) {return id==parentId}).length==0) {
          var start = document.getElementById(ids[0]);
          var end = document.getElementById(parentId);
          this.checkLeaderLine();
          newLine = new LeaderLine(start,end,{ color: '#EFFAB4' });
          myDrawsLines.push(newLine);
          ids = [];
        } else if(ids.length == 0) {
          ids.push(parentId);
        }
        event.stopPropagation();
      },
      mouseOverOrMoveEvent:function(event) {
        if(event.target.classList.contains('box')) {
          event.target.classList.remove('box');
        }
        event.target.classList.add('box_hover');
        event.stopPropagation();
      },
      mouseOutEvent:function (event) {
        if(event.target.classList.contains('box_hover')) {
          event.target.classList.remove('box_hover');
        }
        event.target.classList.add('box');
        event.stopPropagation();
      },
      checkLeaderLine: function() {
        if(!LeaderLine) { LeaderLine = window.LeaderLine;}
      },
      getLines: function(){
        var me = this;
        return myDrawsLines.map(me.getId);
      },
      getId:function(line){
        return {start:line.start.id,end:line.end.id}
      },
      showRelationship: function () {
        var me = this;
        lines = this.getLines();
        console.log('Lines: ', JSON.stringify(lines));
        console.log('relationship: ', JSON.stringify(me.buildRelationShip("ex-010-0")));
      }
    },
    mounted() {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .anchor, .anchor40, .anchor60, .anchor80-line, .anchor100-line, .anchor-text {
    position: absolute;
    background-color: #00A9C9;
    box-sizing: border-box;
    padding: 5px 0;
    font-size: 24px;
    line-height: 1;
    text-align: center;
  }

  .anchor40 {
    width: 40px;
    height: 40px;
  }

  div {
    display: block;
  }

  .stage {
    position: relative;
    margin-bottom: 1em;
  }

  .box {
    border: white 1px solid;
    width: 5px;
    height: 5px;
    position: absolute;
    opacity: 0.8;
    cursor: pointer;
  }

  .box_hover {
    border: olivedrab 1px solid;
    width: 5px;
    height: 5px;
    position: absolute;
    opacity: 0.8;
    cursor: pointer;
  }
</style>
